<template>

  <view class="components-keyboard">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>keyboard键盘</tn-nav-bar>

    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
        <view v-if="mode === 'number' || mode === 'card'" class="number-value">
          <tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容" @click="showKeyboard"></tn-input>
          <tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx" height="70rpx" @click="clearInputValue">清空</tn-button>
        </view>
        <view v-else class="car-value">
          <block v-for="(item, index) in 8" :key="index">
            <view
              class="car-input"
              :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
              @tap="chooseLicensePlateNumber(index)"
            >
              <block v-if="index === 7 && !licensePlateValue[index]">
                <view class="new-energy-car">
                  <view class="icon tn-icon-add"></view>
                  <view class="text">新能源</view>
                </view>
              </block>
              <block v-else>
                {{ licensePlateValue[index] || '' }}
              </block>
            </view>
            <view class="car-point" v-if="index === 1">
              <view class="point"></view>
            </view>
          </block>
        </view>
      </dynamic-demo-template>

    </view>
    
    <!-- 键盘 -->
    <tn-keyboard
      v-model="value"
      :mode="mode"
      :dotEnabled="dotEnabled"
      :randomEnabled="randomEnabled"
      :switchEnMode="switchEnMode"
      :tooltip="tooltip"
      :mask="mask"
      @change="onChange"
      @cancel="onCancel"
      @confirm="onConfirm"
      @backspace="onBackspace"
    ></tn-keyboard>

  </view>

</template>

<script>
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  export default {
    name: 'componentsKeyboard',
    components: {dynamicDemoTemplate},
    data() {
      return {
        value: false,
        mode: 'number',
        dotEnabled: true,
        randomEnabled: false,
        switchEnMode: false,
        tooltip: true,
        mask: true,
        
        // 输入的值
        inputValue: '',
        // 输入的车牌
        licensePlateValue: ['','','','','','','',''],
        // 当前选择输入的车牌号码位置
        currentLicensePlateIndex: 0,
        
        tips: ['无需依赖额外的样式文件','使用tn-keyboard组件'],
        sectionList: [
          {
            name: '参数切换',
            section: [
              {
                title: '模式',
                optional: ['数字','身份证','车牌'],
                methods: 'modeChange'
              },
              {
                title: '显示点',
                optional: ['显示','隐藏'],
                methods: 'dotEnabledChange'
              },
              {
                title: '打乱顺序',
                optional: ['是','否'],
                methods: 'randomEnabledChange',
                current: 1
              },
              {
                title: '显示顶部工具栏',
                optional: ['显示','隐藏'],
                methods: 'tooltipChange'
              },
              {
                title: '遮罩显示',
                optional: ['是','否'],
                methods: 'maskChange'
              }
            ]
          }
        ]
      }
    },
    watch: {
      mode(value) {
        switch (value) {
          case 'number':
            this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0)
            break
          case 'card':
            this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1)
            break
          case 'car':
            this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2)
            break
        }
      },
      currentLicensePlateIndex(value) {
        if (value === 0) {
          this.switchEnMode = false
        } else {
          this.switchEnMode = true
        }
      }
    },
    methods: {
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
      // 弹出键盘
      showKeyboard() {
        this.value = true
      },
      // 切换模式
      modeChange(event) {
        switch (event.index) {
          case 0:
            this.mode = 'number'
            this.dotEnabled = true
            this.value = true
            this.$refs.demoTemplate.updateSectionBtnsState(1, true)
            break
          case 1:
            this.mode = 'card'
            this.value = true
            this.$refs.demoTemplate.updateSectionBtnsState(1, false)
            break
          case 2:
            this.mode = 'car'
            this.licensePlateValue = ['','','','','','','','']
            this.$refs.demoTemplate.updateSectionBtnsState(1, false)
            break
        }
      },
      // 切换点显示
      dotEnabledChange(event) {
        this.dotEnabled = event.index === 0 ? true : false
        this.value = true
      },
      // 切换乱序显示
      randomEnabledChange(event) {
        this.randomEnabled = event.index === 0 ? true : false
        this.value = true
      },
      // 切换顶部工具栏显示
      tooltipChange(event) {
        this.tooltip = event.index === 0 ? true : false
        this.value = true
      },
      // 切换遮罩状态
      maskChange(event) {
        this.mask = event.index === 0 ? true : false
        this.value = true
      },
      
      // 键盘输入值改变
      onChange(e) {
        if (this.mode === 'number' || this.mode === 'card') {
          this.inputValue += e
        } else if (this.mode === 'car') {
          // 判断输入的值是否正确
          if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
            this.$t.message.toast('车牌归属地选择错误')
            return
          } else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
            this.$t.message.toast('车牌归属地字母选择错误')
            return
          }
          if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
            this.$t.message.toast('车牌号码选择错误')
            return
          }
          // this.licensePlateValue[this.currentLicensePlateIndex] = e
          this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
          this.currentLicensePlateIndex++
          // 判断车牌是否已经选择完成
          if (this.currentLicensePlateIndex === 8) {
            this.value = false
          }
        }
      },
      // 点击了取消按钮
      onCancel() {
        this.$t.message.toast('点击了取消按钮')
      },
      // 点击了确认按钮
      onConfirm() {
        this.$t.message.toast('点击了确认按钮')
        this.value = false
      },
      // 点击了退格按钮
      onBackspace() {
        if (this.mode === 'number' || this.mode === 'card') {
          if (!this.inputValue) {
            return
          }
          this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
        } else if (this.mode === 'car') {
          let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex
          if (this.licensePlateValue[licensePlateIndex] !== '') {
            this.$set(this.licensePlateValue, licensePlateIndex, '')
          } else {
            licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex
            this.$set(this.licensePlateValue, licensePlateIndex, '')
          }
          this.currentLicensePlateIndex = licensePlateIndex
        }
      },
      
      // 点击车牌对于位置进行选择输入
      chooseLicensePlateNumber(index) {
        this.currentLicensePlateIndex = index
        this.mode = 'car'
        this.value = true
      },
      
      // 清空内容
      clearInputValue() {
        this.inputValue = ''
      }

    },

  }
</script>

<style lang="scss" scoped>
  
  .number-value {
    display: flex;
    align-items: center;
    
    .clear-btn {
      margin-left: 10rpx;
    }
  }
  
  .car-value {
    display: flex;
    
    .car-input {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 74rpx;
      width: 64rpx;
      border: 1px solid $tn-border-solid-color;
      border-radius: 18rpx;
      text-align: center;
      font-size: 38rpx;
      line-height: 1;
      margin-left: 10rpx;
      background-color: #FFFFFF;
      
      &.new-energy {
        background: transparent;
        border-style: dashed;
      }
    }
    
    .car-point {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 74rpx;
      width: 20rpx;
      margin-left: 10rpx;
      
      .point {
        width: 20rpx;
        height: 20rpx;
        background-color: $tn-font-holder-color;
        border-radius: 50%;
      }
    }
    
    .new-energy-car {
      display: flex;
      flex-direction: column;
      font-size: 16rpx;
      color: $tn-font-sub-color;
      
      .icon {
        margin-bottom: 8rpx;
      }
    }
  }
</style>
